<template>
  <main>
    <el-row type="flex" justify="space-around" :gutter="20">
      <!--左侧-->
      <el-col class="hidden-sm-and-down" :md="4">
        <!--<el-card class="left-card" shadow="hover" :body-style="{padding:'10px'}">-->
        <el-card class="left-card" shadow="hover">
          <!--技术频道 实际上就是类别-->
          <!-- <el-divider content-position="right">技术频道</el-divider>-->
          <p>技术频道</p>
          <!--类目-->
          <el-menu
            active-text-color="#ffffff"
            router
            :default-active="$route.path"
          >
            <el-menu-item index="/">推荐</el-menu-item>
            <el-menu-item
              v-for="item in categoryList"
              :key="item.id"
              :index="'/' + item.id"
            >
              {{ item.name }}
            </el-menu-item>
          </el-menu>
        </el-card>

<!--        <el-card class="left-card" shadow="hover">-->
<!--          <p>文章标签</p>-->
<!--          <el-menu-->
<!--            active-text-color="#ffffff"-->
<!--            router-->
<!--            :default-active="$route.path"-->
<!--          >-->
<!--            <el-menu-item index="/">推荐</el-menu-item>-->
<!--            <el-menu-item index="/1">JAVA</el-menu-item>-->
<!--            <el-menu-item index="/2">前端</el-menu-item>-->
<!--            <el-menu-item index="/3">Python</el-menu-item>-->
<!--            <el-menu-item index="/4">小程序</el-menu-item>-->

<!--          </el-menu>-->
<!--        </el-card>-->
      </el-col>

      <!--中间-->
      <el-col :xs="24" :sm="24" :md="15">
        <div class="blog-center">

          <!--轮播图-->
          <div class="banner">
            <el-carousel height="360px">
              <!--nuxt-link会作为子路由跳转 而广告要跳转到外链就需要a标签href才行-->
              <el-carousel-item v-for="item in mainAdvertList" :key="item.id">
                <a :href="item.advertUrl" :target="item.advertTarget">
                  <img :src="item.imageUrl"/>
                </a>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 文章列表 -->
          <nuxt-child/>
        </div>
      </el-col>

      <!--右侧广告区-->
      <el-col class="hidden-sm-and-down" :md="5">
        <el-card class="right-card" shadow="hover">
          <p class="right-card-title">精选壁纸</p>
          <!--走马灯-->
          <el-carousel height="250px" indicator-position="none">
            <el-carousel-item v-for="item in courseAdvertList" :key="item.id">
              <a :target="item.advertTarget" :href="item.advertUrl">
                <img :src="item.imageUrl" alt="" >
                <p class="right-card-item-title">{{ item.title }}</p>
              </a>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>
  </main>
</template>

<script>

export default {
  async asyncData({app}) {
    // 1. 查询技术频道
    const {data: categoryList} = await app.$getCategoryList();

    // 2. 查询滚动图广告
    const {data: mainAdvertList} = await app.$getAdvertList(1);

    // 3. 查询课程推荐广告
    const {data: courseAdvertList} = await app.$getAdvertList(2);

    // 测试inject
    // const testInject = await app.$testInject();
    // console.log(testInject)

    // console.log(categoryList, mainAdvertList, courseAdvertList)

    return {categoryList, mainAdvertList, courseAdvertList};
  },
};
</script>

<style scoped>
@import "~assets/css/blog/index.css";
</style>
